<template>
  <f7-page>
    <f7-navbar class="bg-color-transparent no-hairline" title="财富详情" back-link=" ">
      <f7-nav-right>
        <f7-link>交易记录</f7-link>
      </f7-nav-right>
    </f7-navbar>

    <div class="top-box">
      <div class="top">
        <h3>BCDT-I($1.00000000)</h3>
        <h1>0.00000000</h1>
        <h2>≈$0.00000000</h2>
      </div>

      <div class="float-box">
        <div>
          <div>
            <p>可用(BCDT-I)</p>
            <p>0.00000000</p>
          </div>
          <div>
            <p>累计奖励(BDF</p>
            <p>0.00000000</p>
            <p>≈0.00000000</p>
          </div>
        </div>
        <div>
          <div>
            <p>可用(BCDT-I)</p>
            <p>0.00000000</p>
          </div>
          <div>
            <p>累计奖励(BDF</p>
            <p>0.00000000</p>
            <p>≈0.00000000</p>
          </div>
        </div>
      </div>
    </div>

    <f7-block-title>我的合约</f7-block-title>

    <no-content-tips></no-content-tips>

    <f7-toolbar bottom class="bottom-buttons-toolbar">
      <f7-button fill color="white" class="no-border-radius">提币</f7-button>
      <f7-button fill color="white" class="no-border-radius">充币</f7-button>
      <f7-button fill color="blue" class="no-border-radius">购买</f7-button>
    </f7-toolbar>
  </f7-page>
</template>

<script>
  export default {
    name: "wealth-details",
    created() {

    }
  }
</script>

<style scoped lang="scss">
  .top-box {
    height: 600px;
    margin-top: -44PX;
    color: #fff;
    position: relative;
    .top {
      height: 300px;
      background: $mainColor;
      padding: 88px $padding;
    }
    h1 {
      font-weight: bold;
      @extend .h1;
      margin-top: 10px;
    }
    h2 {
      font-size: 35px;
    }
    .float-box {
      height: 280px;
      background: #fff;
      width: 90%;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      border-radius: $radius;
      box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
      display: flex;
      justify-content: space-around;
      align-items: center;
      > div {
        > div:first-child {
          margin-bottom: 40px;
        }
        p {
          &:first-child {
            color: $colorGrey;
            position: relative;
            &:before {
              display: block;
              content: '';
              width: 15px;
              height: 15px;
              border-radius: 50%;
              background: $mainColor;
              position: absolute;
              right: 105%;
              top: 50%;
              transform: translateY(-50%);
            }
          }
          &:nth-child(2) {
            color: #000;
            padding: 5px 0;
          }
          &:nth-child(3) {
            color: $mainColor;
          }
        }
      }
    }
  }

</style>
